<template>
  <div id="bt1page">
    <ul class="bt1_ul">
      <li v-for="(item,index) in btimg" :key="index">
          <img :src="item.bt1img" alt="">
        <p>{{item.bt1title}}</p>
        <div class="price">
          <div class="content">￥{{item.bt1price}}</div>
          <div class="vipcontent">
            <span class="sp1">VIP</span>
            <span class="sp2">￥{{item.bt1vipprice}}</span>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import getlink from "@/api/getapi.js";
export default {
  data() {
    return {
      btimg: []
      
    };
  },
  mounted(){
      getlink("/mock/data/Btlist").then((data)=>{
          this.btimg = data.data.bt4;
          console.log(this.btimg)
      })
  }
};
</script>

<style scoped>
#bt1page {
  width: 100%;
}
.bt1_ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.bt1_ul li {
  width: 1.7rem;
  height: 1.64rem;
  float: left;
  margin-top: .1rem;
  margin-bottom: .16rem;
}
.bt1_ul li img {
  width: 100%;
  height: .96rem;
}
.bt1_ul li p {
  width: 100%;
  height: .32rem;
  font-size: .14rem;
  line-height: .32rem;
}
.bt1_ul li .price {
  width: 100%;
  height: .26rem;
}
.bt1_ul li .price .content {
  width: .46rem;
  height: .26rem;
  line-height: .26rem;
  font-size: .12rem;
  color: gray;
  float: left;
}
.vipcontent {
  width: .9rem;
  height: .26rem;
  float: left;
  border-radius: .05rem;
  border: solid .01rem;
}
span {
  width: 50%;
  height: 100%;
  line-height: .26rem;
  text-align: center;
  font-size: .12rem;
  display: block;
  float: left;
}
.sp1 {
  background-color: #241b09;
  color: #fbdfac;
}
.sp2 {
  background-color: #fbdfac;
  color: #241b09;
}
</style>
